import LPopup from "@/components/public/lPopup/lPopup";
import { defineComponent, reactive, ref } from "vue";
import _ from "lodash";
import styles from "./Add.module.less";
import LForm, { LFormItem } from "@/components/public/lForm/lForm";


export default defineComponent({
  setup(props, { expose, emit }) {
    const addPopupRef = ref(null as any);
    const state_default = {
      form: {
        id: '',
        selected_product: null,
        name: null,
        insuranceCompany: null,
        insuranceType: null,
        area: null,
        protectionType: null,
        protectionCharacteristic: null,
        productFeature: null,
      },
      rules: {
        selected_product: [{ required: true, message: "请选择产品" }],
        name: [{ required: true, message: "请输入产品名称" }],
        insuranceCompany: [{ required: true, message: "请选择保险公司" }],
        insuranceType: [{ required: true, message: '请选择险种类别' }],
        area: [{}],
        protectionType: [{}],
        protectionCharacteristic: [{}],
        productFeature: [{}]
      },
      product: [],
      insuranceCompany: [],
      insuranceType: [
        {
          label: '旅游险',
          value: '旅游险',
        }
      ],
      area: [
        {
          label: '全球',
          value: '全球',
        },
        {
          label: '全球(不含中国大陆)',
          value: '全球(不含中国大陆)',
        },
        {
          label: '中国境内及境外',
          value: '中国境内及境外',
        },
        {
          label: '境内旅游',
          value: '境内旅游',
        },
        {
          label: '境外旅游',
          value: '境外旅游',
        },
      ],
      protectionType: [
        {
          label: '签证保险',
          value: '签证保险',
        },
        {
          label: '跟团游',
          value: '跟团游',
        },
        {
          label: '自驾游',
          value: '自驾游',
        },
        {
          label: '自由行',
          value: '自由行',
        },
        {
          label: '邮轮',
          value: '邮轮',
        },
        {
          label: '商务旅游',
          value: '商务旅游',
        },
        {
          label: '户外运动',
          value: '户外运动',
        },
        {
          label: '研学留学',
          value: '研学留学',
        },
        {
          label: '海外务工',
          value: '海外务工',
        },
      ],
      protectionCharacteristic: [
        {
          label: '既往症',
          value: '既往症',
        },
        {
          label: '高风险',
          value: '高风险',
        },
        {
          label: '销售型',
          value: '销售型',
        },
        {
          label: '采购型',
          value: '采购型',
        },
        {
          label: '全球可保',
          value: '全球可保',
        },
        {
          label: '猝死',
          value: '猝死',
        },
        {
          label: '公共交通',
          value: '公共交通',
        },
        {
          label: '高原反应',
          value: '高原反应',
        },
      ],
      productFeature: [
        {
          label: '航空意外',
          value: '航空意外',
        },
        {
          label: '境外投保',
          value: '境外投保',
        },
        {
          label: '高保额',
          value: '高保额',
        },
        {
          label: '疗休养',
          value: '疗休养',
        },
        {
          label: '入境游',
          value: '入境游',
        },
      ]
    }
    const state: any = reactive(
      _.cloneDeep(state_default)
    )
    //取消
    const cancelHandler = () => {
      close()
    };
    //确定
    const confirmHandler = (e?: any) => {

    }
    //开启弹窗
    const open = (e: any) => {
      addPopupRef.value.open();
      console.log(e)
    }
    //关闭弹窗
    const close = () => {
      addPopupRef.value.close();
    }
    expose({
      open,
    })
    return () => (
      <LPopup
        width="600px"
        title={state.form.id ? "编辑产品" : "添加产品"}
        ref={addPopupRef}
        onBeforeClose={() => {
          Object.entries(
            _.cloneDeep(state_default)
          ).forEach(item => {
            state[item[0]] = item[1];
          })
        }}
      >
        <div class={styles.addPopup}>
          <LForm
            btns={["cancel", "confirm"]}
            v-model={state.form}
            rules={state.rules}
            onCancel={() => {
              cancelHandler();
            }}
            onConfirm={(e: any) => {
              confirmHandler(e);
            }}
          >
            <LFormItem label="产品" prop="selected_product">
              <a-select
                v-model:value={state.form.selected_product}
                placeholder="请选择产品"
                options={state.product}
                labelInValue={true}
                style={{width:'100%'}}
              ></a-select>
            </LFormItem>
            <LFormItem label="产品" prop="name">
              <a-input v-model:value={state.form.name}
                placeholder="请输入产品名称" />
            </LFormItem>
            <LFormItem label="保险公司" prop="insuranceCompany">
              <a-select
                v-model:value={state.form.insuranceCompany}
                placeholder="请选择保险公司"
                options={state.insuranceCompany}
                style={{width:'100%'}}
              ></a-select>
            </LFormItem>
            <LFormItem label="险种类别" prop="insuranceType">
              <a-select
                v-model:value={state.form.insuranceType}
                placeholder="请选择险种类别"
                options={state.insuranceType}
                style={{width:'100%'}}
              ></a-select>
            </LFormItem>
            <LFormItem label="出行地区" prop="area">
              <a-select
                v-model:value={state.form.area}
                placeholder="请选择出行地区"
                options={state.area}
                style={{width:'100%'}}
              ></a-select>
            </LFormItem>
            <LFormItem label="保障类型" prop="protectionType">
              <a-select
                v-model:value={state.form.protectionType}
                placeholder="请选择保障类型"
                options={state.protectionType}
                style={{width:'100%'}}
              ></a-select>
            </LFormItem>
            <LFormItem label="保障特点" prop="protectionCharacteristic">
              <a-select
                v-model:value={state.form.protectionCharacteristic}
                placeholder="请选择保障特点"
                options={state.protectionCharacteristic}
                style={{width:'100%'}}
              ></a-select>
            </LFormItem>
            <LFormItem label="产品特点" prop="productFeature">
              <a-select
                v-model:value={state.form.productFeature}
                placeholder="请选择产品特点"
                options={state.productFeature}
                style={{width:'100%'}}
              ></a-select>
            </LFormItem>
          </LForm>
        </div>
      </LPopup>
    )
  }
})